<template>
    <div style="margin-bottom:56px">
        <v-toolbar flat color="primary">
           <v-btn icon flat>
                <v-icon color="white" medium @click="goBack()">keyboard_arrow_left</v-icon>
           </v-btn>
           <v-toolbar-title style="margin-left:0">
               <span style="color:white">周边服务</span>
           </v-toolbar-title>        
        </v-toolbar>

        <!-- 搜索框 -->
        <div style="background-color:#4caf50;height:50px">
            <v-layout class="search">
                <v-flex xs1>
                    <v-icon color="gray" id="icon">search</v-icon>
                </v-flex>
                <v-flex xs11>
                    <input type="text" v-model="serviceName" placeholder="请输入商家名称" style="height:25px;font-size:16px;width:100%;margin-top:8px" @keyup.enter="searchService()"/>
                </v-flex>
            </v-layout>
        </div>
   
        <!-- 分类别显示周边服务 -->
        <div style="background-color:#4caf50">
            <v-layout row wrap id="services_layout" justify-center text-xs-center>
                
                <v-flex xs4 
                 v-for="(t,index) in types"
                 :key="`type-${index}`"
                 id="services_flex"
                >
                    <v-btn flat @click="chooseType(`{{t.name}}`)" style="padding:0;margin:0">
                        <strong style="color:white;">{{t.name}}</strong>
                    </v-btn>
                </v-flex>
            
            <v-list three-line id="services_list">
                <template v-for="(item,index) in services">
                    <v-list-tile :key="`item-${index}`" avatar @click="goToDetails(item.shopId)">
                        <v-list-tile-avatar>
                            <img :src="item.attachments[0].attachmentUrl">
                        </v-list-tile-avatar>
                        <v-list-tile-content>
                            <v-list-tile-title>{{item.shopName}}</v-list-tile-title>
                            <v-list-tile-sub-title v-text="item.shopAddress"></v-list-tile-sub-title>
                            <v-list-tile-sub-title>￥{{item.shopAvgPrice}}</v-list-tile-sub-title>
                        </v-list-tile-content>
                    </v-list-tile>
                    <v-divider v-if="index+1<services.length" :key="`divider-${index}`"></v-divider>
                </template>
            </v-list>
            </v-layout>  
        </div>
        
        <!-- 发布服务 -->
        <v-card>
            <v-card-text style="position:fixed;bottom:32px;z-index:1;padding:0">
                <v-btn absolute dark fab top left color="green" style="left:43%" @click="$router.push('peripheral-services/release-services')">
                <v-icon>add</v-icon>
                </v-btn>
            </v-card-text>
        </v-card>

   </div>
</template>

<script>

export default {

    name:'commodity',
   
    data(){ /* 后台获取 */
        return{

            types:[
                {name:'教育培训'},
                {name:'生活服务'},
                {name:'医疗健康'},
                {name:'小吃快餐'},
                {name:'休闲运动'},
                {name:'其他'}
            ],

            page:0,
            serviceName:'',
            serviceType:'',

            services:[],
        }
    },

    methods:{

        addItem(){
            var scrollTop=document.documentElement.scrollTop || window.pageYOffset ||document.body.scrollTop
            var service=this.getServices()
            if(scrollTop+window.innerHeight>=document.body.offsetHeight){
                for(var i in service){
                    this.services.push(service[i])
                }
            }
        },

        getServices(){
            var service=[];
             this.$axios({
                method:'get',
                url:this.SERVER+'/api/shop/find',
                params:{
                    FindType:0,
                    pageNum:this.page,
                    pageSize:10,
                    name:this.serviceName,
                    type:this.serviceType
                },
                headers:{
                    'Content-Type':'multipart/form-data',
                    'Authorization':'bearer '+localStorage.getItem('Access-Token')
                }
            }).then(response=>{
                    var res=response['data']['data']['rows']
                    console.log(res)
                    for(var i in res){
                        service.push(res[i]);
                    }
            
                }
            ),response=>({
                function(response){
                    console.log(response)
                }
            })

            this.page++;
            return goods;
        },

        searchGoods(){
            this.page=0;
            this.services=[];
            this.addItem();
        },
        
        chooseType:function(type){
            this.serviceType=type;
            this.page=0;
            this.services=[],
            this.addItem()
        },
        
        goToDetails(id){
            this.$router.push('peripheral-services/'+id+'/services-details');
        },
        goBack(){
            this.$router.back(-1);
        }
    }
}
</script>

<style>
#services_layout{
    margin-top:0;
    margin-left:0
}

#services_flex{
    margin-top:2%;
}

.application .theme--light.v-list, .theme--light .v-list {
    background: #fff;
    color: rgba(0,0,0,.87);
    width:100%
}
</style>

<style scoped>

    .v-input__slot{
        margin-top:0px;
        padding-top:0px;
    }

    .layout{
        margin-left:5%;
        margin-top:2%;
    }

    input:focus{
        outline:none;
    }

    .search{
        background-color:white;
        border-radius:25px;
        margin-top:0px;
        margin-right:18px;
        height:80%
    }

    .flex.xs1{
        margin-top:8px;
        margin-left:8px;
    }

</style>

